<template>
  <div :class="['PinPaiJSPanel',showOrHideCls]">
    <div class="view">
      <div class="btnDiv">
        <div :class='["item",(selectId===sz_201?"select":"")]' @click="btnClick(sz_201)" >品牌介绍</div>
        <div :class='["item",(selectId===sz_202?"select":"")]' @click="btnClick(sz_202)" >集团介绍</div>
        <div :class='["item",(selectId===sz_203?"select":"")]' @click="btnClick(sz_203)" >品牌文化</div>
        <div :class='["item",(selectId===sz_204?"select":"")]' @click="btnClick(sz_204)" >品牌支持</div>
      </div>
      <div class="contentDiv">
        <template v-if="pinpjsData.data!==null">
          <!--品牌简介-->
        <div :class='["pinpjjDiv",(selectId===sz_201?"viewShow":"viewHide")]'>
            <div class="ppjs">
              <div class="left">
                  <img :src='pinpjsData.data.dataList[0].imgUrl' :alt="pinpjsData.data.dataList[0].imgAlt" :title="pinpjsData.data.dataList[0].imgTitle">
              </div>
              <div class="right" v-html="decodeURIComponent(pinpjsData.data.dataList[0].contents)">

              </div>
            </div>
            <div class="dingw">
              <div class="c_title">
                <img src="img/pinpjs/t1.png">
              </div>

              <div class="img">
                <img :src='pinpjsData.data.dataList[2].imgUrl' :alt="pinpjsData.data.dataList[2].imgAlt" :title="pinpjsData.data.dataList[2].imgTitle">
              </div>
            </div>
            <div class="dingw" style="padding-bottom: 120px;">
              <div class="c_title2">
                <img src="img/pinpjs/t2.png">
              </div>

              <div class="img">
                <img :src='pinpjsData.data.dataList[1].imgUrl' :alt="pinpjsData.data.dataList[1].imgAlt" :title="pinpjsData.data.dataList[1].imgTitle">
              </div>
            </div>
        </div>
          <!--集团简介-->
          <div :class='["jtjsDiv",(selectId===sz_202?"viewShow":"viewHide")]'>
            <div class="ppjs">
              <div class="left">
                <img :src='jtuanjsData.data.dataList[0].imgUrl' :alt="jtuanjsData.data.dataList[0].imgAlt" :title="jtuanjsData.data.dataList[0].imgTitle">
              </div>
              <div class="right" v-html="decodeURIComponent(jtuanjsData.data.dataList[0].contents)"></div>
              <!-- <div class="right" v-html="hhh"></div>-->


             </div>
             <div class="dingw">

               <div class="img">
                 <img :src='jtuanjsData.data.dataList[1].imgUrl' :alt="jtuanjsData.data.dataList[1].imgAlt" :title="jtuanjsData.data.dataList[1].imgTitle">
               </div>
             </div>
           </div>
           <!--品牌文化-->
          <div :class='["pinpwhDiv",(selectId===sz_203?"viewShow":"viewHide")]'>
            <div class="dingw">
              <div class="img">
                <img :src='wenhuaData.data.dataList[0].imgUrl' :alt="wenhuaData.data.dataList[0].imgAlt" :title="wenhuaData.data.dataList[0].imgTitle">
              </div>
            </div>
          </div>
          <!--品牌支持-->
          <div :class='["zhicDiv",(selectId===sz_204?"viewShow":"viewHide")]'>
            <div class="dingw">
              <div class="img">
                <img :src='zhicData.data.dataList[0].imgUrl' :alt="zhicData.data.dataList[0].imgAlt" :title="zhicData.data.dataList[0].imgTitle">
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>


<style scoped>
.PinPaiJSPanel{
  position: relative;background: #F6F8E3;
}

.view{
 font-size: 16px;padding-top: 50px;max-width:1100px;margin: auto;
}
.view div{
  position: relative;
}
.btnDiv{
 background: #F3F3A5;color: #7EAF49;margin: auto;
  display:flex;display: -webkit-flex;flex-direction:row;
}
.btnDiv .item {
  position: relative;width: 45%;height: 35px;line-height: 35px;border-left: 1px solid white;border-right: 1px solid white;cursor: pointer;
}
.btnDiv .select{
  background: #7EAF49;color: #FFFFFF;
}

.contentDiv{
  padding-top: 30px;padding-bottom: 70px;
  font-size: 18px;color: #3E3A39;line-height: 30px;
}
.c_title{
 width: 251px;height: 91px;margin: auto;    padding-bottom: 66px;
}
.c_title img{
  width: 251px;height: 91px;
}
.c_title2{
  width: 234px;height: 91px;margin: auto;padding-bottom: 66px;
}
.c_title2 img{
  width: 234px;height: 91px;
}
  /**品牌简介**************/
.pinpjjDiv{
  position: relative;
}
.pinpjjDiv .ppjs{
  position: relative;padding-top: 20px;padding-bottom: 140px;
  display:flex;display: -webkit-flex;flex-direction:row;align-items: center;width: 100%;
}
.pinpjjDiv .ppjs .left{
  width: 43%;
}
.pinpjjDiv .ppjs .left img{
  max-width: 360px;
}
.pinpjjDiv .ppjs .right{
   text-align: left;width: 57%;padding-right: 10px;
}
.pinpjjDiv .dingw{
  padding-bottom: 100px;
}

.pinpjjDiv .dingw .img{

}
.pinpjjDiv .dingw .img img{
  width: 100%;
}
/**集团简介**************/
.jtjsDiv{

}
.jtjsDiv .ppjs{
  padding-top: 20px;padding-bottom: 160px;
  display:flex;display: -webkit-flex;flex-direction:row;align-items: center;width: 100%;
}
.jtjsDiv .ppjs .left{
  width: 43%;
}
.jtjsDiv .ppjs .left img{
  max-width: 414px;
}
.jtjsDiv .ppjs .right{
  padding-left: 20px;text-align: left;width: 57%;padding-right: 20px;
}
.jtjsDiv .dingw{
  padding-bottom: 95px;
}

.jtjsDiv .dingw .img{

}
.jtjsDiv .dingw .img img{
  width: 100%;
}
/**品牌文化***/
.pinpwhDiv{
  padding-top: 100px;padding-bottom: 1px;
}
.pinpwhDiv .dingw{
  padding-bottom: 50px;
}

.pinpwhDiv .dingw .img{

}
.pinpwhDiv .dingw .img img{
  width: 100%;
}
/**品牌支持***/
.zhicDiv{
  padding-top: 190px;padding-bottom: 190px;
}
.zhicDiv .dingw{
  padding-bottom: 50px;
}

.zhicDiv .dingw .img{

}
.zhicDiv .dingw .img img{
  width: 100%;
}
</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import Enum from "@/js/Enum";


let store = useStore();
let sz_201=201;let sz_202=202;let sz_203=203;let sz_204=204;
/**201:"品牌介绍" 202:"集团介绍"   203:"品牌文化"    204:"品牌支持"**/
let selectId=ref(sz_201);
//品牌介绍
let pinpjsData=reactive({data:null});
//集团介绍
let jtuanjsData=reactive({data:null});
//品牌文化
let wenhuaData=reactive({data:null});
//品牌支持
let zhicData=reactive({data:null});
onMounted(() => {
  console.log("PinPaiJSPanel onMounted 品牌介绍一级页面 初始化");
  window.scrollTo(0, 0);
  store.state.channelId=Enum.cId_2;
  getSrsData();
});



let getSrsData=()=>{
  if(store.state.pinpaiJsData===null){
    $.ajax({
      url: store.state.data_url+'api/getChannelListById',
      type: 'GET',
      dataType: 'json',
      jsonp: "",
      cache: false,
      data: {"channelId":Enum.cId_2},
      success: function(data) {
        //console.log("GameData getChannelListById 品牌介绍",data);
        store.state.pinpaiJsData=(data.content.list[0].levelList.length>0?data.content.list[0].levelList:data.content.list[0].datalist);
        console.log("GameData getChannelListById 品牌介绍",store.state.pinpaiJsData);
        setDataHandler();
      },
      error: function(xhr, textStatus, errorThrown) {
        console.log("网络错误!");
      }
    });
  }else{
    setDataHandler();
  }
}

let setDataHandler=()=>{
  if(pinpjsData.data!=null)return;
  for(let i=0;i<store.state.pinpaiJsData.length;i++){

    if(store.state.pinpaiJsData[i].channelId===sz_202){
      jtuanjsData.data=store.state.pinpaiJsData[i];
    }
    if(store.state.pinpaiJsData[i].channelId===sz_203){
      wenhuaData.data=store.state.pinpaiJsData[i];
    }
    if(store.state.pinpaiJsData[i].channelId===sz_204){
      zhicData.data=store.state.pinpaiJsData[i];
    }
    if(store.state.pinpaiJsData[i].channelId===sz_201){
      pinpjsData.data=store.state.pinpaiJsData[i];
    }
  }
}


onBeforeUnmount(() => {
  console.log('PinPaiJSPanel onBeforeUnmount');
})
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("PinPaiJSPanel onUnmounted 卸载组件实例后  ");
});
let showOrHideCls=ref('');

let btnClick=(id)=>{
  console.log("PinPaiJSPanel btnClick ",id);
  if(selectId.value===id)return;
    selectId.value=id;
}
</script>




